<template>
    <div style=" margin-left: 5%; margin-top: 2%;">
        
        <h2 style="text-align: left;margin-bottom: 40px;">产品类别新增</h2>
        <el-divider></el-divider>
        <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="类别编号:" prop="CategoryCode" style="text-align: left;">
                <el-input v-model="form.CategoryCode" style="width: 500px;"></el-input>
            </el-form-item>
            <el-form-item label="类别名称:" prop="CategoryName" style="text-align: left;">
                <el-input v-model="form.CategoryName" placeholder="全部" style="width: 500px;"></el-input>
            </el-form-item>
            <el-form-item label="上级类别:" prop="SuperiorTId" style="text-align: left;">
                <el-select v-model="form.SuperiorTId" clearable placeholder="请选择" style="width: 500px;">
                    <el-option label="-" value="0"></el-option>
                    <el-option v-for="item in options" :key="item.id" :label="item.categoryName" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注:" prop="Remarks" style="text-align: left;">
                <el-input v-model="form.Remarks" style="width: 500px;"></el-input>
            </el-form-item>
            <el-form-item style="text-align: left;">
                <el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
                <el-button @click="back()">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { AddCategoryApi, BindCategoryApi } from "@/api/BasicsDatumServer/Category";
import { autoGenerateCode } from "@/utils/utils";

export default {
    data() {
        return {
            // 表单数据
            form: {
                CategoryCode: "",
                CategoryName: "",
                SuperiorTId: "",
                Remarks: ""
            },
            // 选项
            options: [],
            // 校验规则
            rules: {
                CategoryName: [
                    { required: true, message: '请输入类别名称', trigger: 'blur' },
                ],
                SuperiorTId: [
                    { required: true, message: '请选择上级类别', trigger: 'change' }
                ],
                
            }
        }
    },
    methods: {
        //提交表单
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //获取表单数据
                    var parms = {
                        CategoryCode: this.form.CategoryCode,
                        CategoryName: this.form.CategoryName,
                        SuperiorTId: this.form.SuperiorTId,
                        Remarks: this.form.Remarks
                    }
                    //调用添加分类接口
                    AddCategoryApi(parms).then(
                        (res) => {
                            if (res.data.code == 0) {
                                //添加成功，跳转到列表页面
                                this.$message.success("添加成功");
                                //跳转到列表页面
                                this.$router.push("CategoryList");
                            } else {
                                //添加失败
                                this.$message.error("添加失败");
                            }
                        },
                        (err) => {
                            console.error(err);
                        }
                    );
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        //返回列表页面
        back() {
            //跳转到列表页面
            this.$router.push("CategoryList");
        },
        //获取分类列表
        getCategoryList() {
            //调用绑定分类接口
            BindCategoryApi().then(
                (res) => {
                    //获取分类列表数据
                    this.options = res.data.data;
                    console.log(res.data.data);
                },
                (err) => {
                    console.error(err);
                }
            );
        }
    },
    created() {
        // 调用获取分类列表的方法
        this.getCategoryList();
        this.form.CategoryCode = autoGenerateCode('FL');
    },
}
</script>
<style></style>